<template>
  <div>
    <el-dialog title="工单详情" :visible="showDetailsDialog" @close="close">
      <el-row
        class="header"
        v-if="taskinfolist.taskStatus == 3"
        type="flex"
        justify="end"
        align="middle"
      >
        <el-col :span="4" :push="2">
          <i class="el-icon-warning" style="font-size: 20px"></i>
          <span style="font-size: 16px">取消</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
            alt=""
          />
        </el-col>
      </el-row>
      <el-row
        class="header"
        v-if="taskinfolist.taskStatus == 1"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="4" :push="2"
          ><i style="font-size: 20px" class="el-icon-time"></i>
          <span style="font-size: 16px">待办</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_1.834b274c.png"
            alt=""
        /></el-col>
      </el-row>
      <el-row
        class="header"
        v-if="taskinfolist.taskStatus == 4"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="4" :push="2"
          ><i style="font-size: 20px" class="el-icon-success"></i>
          <span style="font-size: 16px">完成</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_4.3b5af41c.png"
            alt=""
        /></el-col>
      </el-row>
      <el-row
        class="header"
        v-if="taskinfolist.taskStatus == 2"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col :span="4" :push="2"
          ><i style="font-size: 20px" class="el-icon-run"></i>
          <span style="font-size: 16px">进行</span></el-col
        >
        <el-col :push="12">
          <img
            src="http://likede2-admin.itheima.net/img/pic_2.3b5af41c.png"
            alt=""
        /></el-col>
      </el-row>
      <!--  待办-->
      <!--  完成-->
      <div class="body">
        <div class="single">
          <span
            >设备编号：<span>{{ taskinfolist.innerCode }}</span></span
          >
        </div>
        <div class="single">
          <span
            >创建日期：<span>{{ taskinfolist.createTime }}</span></span
          >
        </div>
        <div
          class="single"
          v-if="taskinfolist.taskStatus == 4 || taskinfolist.taskStatus == 3"
        >
          <span v-if="taskinfolist.taskStatus == 4"
            >完成日期：<span>{{ taskinfolist.updateTime }}</span></span
          >
          <span v-if="taskinfolist.taskStatus == 3"
            >取消日期：<span>{{ taskinfolist.updateTime }}</span></span
          >
        </div>
        <div class="single">
          <span
            >运营人员：<span>{{ taskinfolist.userName }}</span></span
          >
        </div>
        <div class="single">
          <span
            >工单类型：<span>{{
              taskinfolist.productTypeId == 2 ? "补货工单" : "维修工单"
            }}</span></span
          >
        </div>
        <div class="single">
          <span @click="showvmdialogFn"
            >补货数量：<span style="color: #85a1ff">补货详情</span></span
          >
        </div>
        <div class="single">
          <span
            >工单方式：<span>{{
              taskinfolist.createType == 1 ? "手动" : "自动"
            }}</span></span
          >
        </div>
        <div class="single">
          <span v-if="taskinfolist.taskStatus == 3"
            >取消原因：<span>{{ taskinfolist.desc }}</span></span
          >
          <span v-else
            >备注：<span>{{ taskinfolist.desc }}</span></span
          >
        </div>
        <div class="single" v-if="taskinfolist.taskStatus == 1"></div>
      </div>
      <div class="footer" v-if="taskinfolist.taskStatus != 4">
        <div
          v-if="taskinfolist.taskStatus == 3"
          class="button"
          @click="reCreatedFn"
        >
          重新创建
        </div>

        <div
          v-if="taskinfolist.taskStatus == 1"
          class="button"
          @click="quitgetChannelListTaskFn"
        >
          取消工单
        </div>
      </div>
    </el-dialog>

    <!-- 补货详情的dialog -->
    <el-dialog title="补货详情" :visible="showvmdialog" @close="close1">
      <div class="dialog-content">
        <el-table :data="expectList" height="250">
          <!-- 放置列 -->
          <el-table-column prop="channelCode" align="center" label="货道编号" />
          <el-table-column prop="skuName" align="center" label="商品名称" />
          <el-table-column align="center" label="补满数量">
            <!-- 自定义列结构 -->
            <template v-slot="{ row }">
              <el-input-number
                size="mini"
                v-model="row.expectCapacity"
                controls-position="right"
                style="width: 80%; display: flex; flex-direction: column"
              >
              </el-input-number>
            </template>
          </el-table-column>
        </el-table>
        <!-- 按钮 -->

        <div class="footer">
          <el-button
            @click="showvmdialog = false"
            style="background-color: #fbf4f0"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="showvmdialog = false"
            style="background-color: #ff6c29"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getChannelList, canceltask } from "@/api/businessTask";
export default {
  data() {
    return {
      showvmdialog: false,
      ChannelList: [],
      expectList: [],
    };
  },
  components: {},
  props: {
    showDetailsDialog: Boolean,
    taskinfolist:Object,
  },
  methods: {
    showvmdialogFn(){
      this.showvmdialog = true;
      console.log(this.taskinfolist);
    },
    close() {
      this.$emit("update:showDetailsDialog", false);
    },
    close1() {
      this.showvmdialog = false;
    },
    async getChannelList() {
      // console.log(this.taskinfolist.innerCode);
       const res1 = await getChannelList(this.taskinfolist.innerCode);
      // console.log(res1);
      this.ChannelList = res1.filter((item) => {
        return item.sku != null;
      });
      this.expectList = this.ChannelList.map((item) => {
        return {
          channelCode: item.channelCode,
          expectCapacity: item.maxCapacity - item.currentCapacity,
          skuId: item.skuId,
          skuImage: item.sku.skuImage,
          skuName: item.sku.skuName,
        };
      });
    },
    reCreatedFn() {
      this.$emit("changeAddDialog");
      this.close();
    },
    async quitgetChannelListTaskFn() {
      this.$confirm("确认取消订单？").then(async () => {
       const res1= await canceltask(
          {
            desc: "",
            taskId: this.taskinfolist.taskId,
          },
          this.taskinfolist.taskId
        );
       if(res1 === true){
        this.$message('取消成功')
         this.close()
         this.$emit('updatetablelist')
       }else{
         this.$message(res1)
         this.close()
         this.$emit('updatetablelist')
       }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.header {
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
}
.body {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  justify-content: space-evenly;
  align-content: center;
  .single {
    width: 50%;
    height: 20px;
    margin: 5px 0;
    display: flex;
    justify-content: flex-start;
    align-content: center;
  }
}
.footer {
  display: flex;
  width: 100%;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  .button {
    width: 80px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #336;
    background-color: #fbf4f0;
  }
}
</style>
